import React from 'react';
import {FloatButton, message} from 'antd';
import {
    ColumnHeightOutlined,
    PauseCircleOutlined,
    PlayCircleOutlined,
    SwapOutlined,
    UpOutlined
} from "@ant-design/icons";
import {connect} from "react-redux";
import {useNavigate, useLocation} from "react-router-dom";
import {setPlayMusic} from "../../store/actions/MyFloatButtonAction";

function MyFloatButton(props) {
    const Navigate = useNavigate()
    const location = useLocation()
    const [messageApi, contextHolder] = message.useMessage();
    const onPlayMusic = () => {
        props.setPlayMusic()
    }

    // 前后台切换
    const skip = () => {
        // // 要到后台去
        if (location.pathname.includes('/HomePage')) {
            // 判断权限
            if (!props.user || props.user.userRole !== '0') {
                return messageApi.warning('暂无权限')
            }
            Navigate('/HomeSystem')
        } else { // 去前台
            Navigate('/HomePage')

        }
    }

    const goPageCover = () => {
        Navigate('/PageCover')
    }
    return (
        <>
            {contextHolder}
            <FloatButton.Group
                trigger="click"
                style={{
                    right: 24,
                }}
                icon={<ColumnHeightOutlined/>}
            >
                <FloatButton icon={<UpOutlined onClick={goPageCover}/>}/>
                <FloatButton onClick={onPlayMusic}
                             icon={props.playMusic ? <PauseCircleOutlined/> : <PlayCircleOutlined/>}/>
                <FloatButton onClick={skip} icon={<SwapOutlined/>}/>

            </FloatButton.Group>
        </>
    );
}

const mapStoreToProps = (state) => {
    return {
        playMusic: state.MyFloatButtonRedux.playMusic,
        user: state.UserRedux.user
    }
}

const mapActionToProps = {
    setPlayMusic
}

export default connect(mapStoreToProps, mapActionToProps)(MyFloatButton);
